<template>
  <div class="table-comp">
    <el-table
      style="height: calc(100% - 3rem)"
      header-cell-class-name="table-content-header"
      cell-class-name="table-content-cell"
      row-class-name="table-content-row"
      :data="filterTableData"
      :style="{ width: '100%' }"
      @selection-change="handleSelectionChange"
    >
      <el-table-column class-name="table-content-cell" type="selection" width="55" />
      <el-table-column class-name="table-content-cell" label="用户名" width="120">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.username }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="订单地址" width="280">
        <template #default="scope">
          <el-popover
            popper-class="popover-comp"
            effect="light"
            trigger="hover"
            placement="top"
            width="12rem"
          >
            <template #default>
              <div>用户名: {{ scope.row.address.name }}</div>
              <div>联系电话: {{ scope.row.address.phone }}</div>
              <div>订单地址: {{ scope.row.address.address }}</div>
            </template>
            <template #reference>
              <el-tag class="row-tag">{{ scope.row.address.address }}</el-tag>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="订单时间" width="270">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.time ?? '未填写' }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column class-name="table-content-cell" label="订单金额" width="140">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.total }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column class-name="table-content-cell" label="订单详情" width="140">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <el-button plain @click="changeGoods(scope.row)" class="row-btn" size="small"
              >详情</el-button
            >
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button class="row-btn" size="small" @click="handleEdit(scope.$index, scope.row)"
            >修改</el-button
          >
          <el-button
            class="row-btn"
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="table-pagination"
      background
      v-model:current-page="currentPage"
      layout="prev, pager, next"
      :total="totalPages"
    />
    <el-dialog append-to-body v-model="dialogTableVisible" title="订单详情" width="800">
      <el-table :data="goodsData">
        <el-table-column property="name" label="商品名称" width="150" />
        <el-table-column property="count" label="购买个数" width="200" />
        <el-table-column property="price" label="商品单价" />
      </el-table>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import dayjs from 'dayjs'
import { ref, computed } from 'vue'
// 商品列表 总价钱 时间 地址 姓名
interface Goods {
  id: number
  count: number
  name: string
  price: number
}
interface Address {
  name: string
  address: string
  phone: string
}
interface Order {
  id: number
  uid?: string
  gids: Goods[]
  username: string
  time: string
  address: Address
  total: number
}

const dialogTableVisible = ref(false)
const currentPage = ref(1)
const multipleSelection = ref<Order[]>([])
const handleEdit = (index: number, row: Order) => {
  console.log(index, row)
}
const handleDelete = (index: number, row: Order) => {
  console.log(index, row)
}
const handleSelectionChange = (val: Order[]) => {
  multipleSelection.value = val
}
const changeGoods = (item: Order) => {
  goodsData.value = item.gids
  dialogTableVisible.value = true
}
const goodsData = ref<Goods[]>([])
const tableData = ref<Order[]>([])
const search = ref('')
const filterTableData = computed(() =>
  tableData.value.filter((data) => data.username.includes(search.value))
)
const dataTotal = ref(0)
const totalPages = computed(() => Math.ceil(dataTotal.value))
function init() {
  const res = {
    result: [
      {
        id: 20,
        uid: 1,
        gids: '[{"id":9,"count":1,"name":"沙田柚","desc":null,"price":9,"discount":15,"img":"/svg/沙田柚.svg","originalPrice":10.59},{"id":7,"count":1,"name":"香蕉","desc":null,"price":8,"discount":15,"img":"/svg/香蕉.svg","originalPrice":9.41},{"id":6,"count":1,"name":"葡萄","desc":null,"price":14,"discount":20,"img":"/svg/葡萄.svg","originalPrice":17.5},{"id":2,"count":1,"name":"青苹果","desc":null,"price":10,"discount":25,"img":"/svg/青苹果.svg","originalPrice":13.33},{"id":5,"count":1,"name":"柠檬","desc":null,"price":6,"discount":25,"img":"/svg/柠檬.svg","originalPrice":8},{"id":8,"count":1,"name":"西瓜","desc":null,"price":10,"discount":20,"img":"/svg/西瓜.svg","originalPrice":12.5},{"id":4,"count":1,"name":"梨","desc":null,"price":8,"discount":25,"img":"/svg/梨.svg","originalPrice":10.67},{"id":3,"count":1,"name":"哈密瓜","desc":null,"price":12,"discount":15,"img":"/svg/哈密瓜.svg","originalPrice":14.12},{"id":1,"count":1,"name":"红苹果","desc":"","price":10,"discount":20,"img":"/svg/红苹果.svg","originalPrice":12.5}]',
        total: 87,
        time: '2024-04-25T08:47:28.000Z',
        address:
          '{"id":2,"phone":"13318510729","name":"往往","addr":"广东省广州市番禺区洛浦街道","normal":0,"address":"广东省广州市番禺区洛浦街道","check":false}',
        username: 'lineo'
      },
      {
        id: 19,
        uid: 1,
        gids: '[{"id":5,"count":3,"name":"柠檬","desc":null,"price":6,"discount":25,"img":"/svg/柠檬.svg","originalPrice":8},{"id":6,"count":2,"name":"葡萄","desc":null,"price":14,"discount":20,"img":"/svg/葡萄.svg","originalPrice":17.5}]',
        total: 46,
        time: '2024-04-25T07:29:47.000Z',
        address:
          '{"id":1,"phone":"13318510729","name":"lineo","addr":"广东省茂名市电白区","normal":0,"address":"广东省茂名市电白区","check":false}',
        username: 'lineo'
      },
      {
        id: 18,
        uid: 1,
        gids: '[{"id":8,"count":2,"name":"西瓜","desc":null,"price":10,"discount":20,"img":"/svg/西瓜.svg","originalPrice":12.5},{"id":5,"count":2,"name":"柠檬","desc":null,"price":6,"discount":25,"img":"/svg/柠檬.svg","originalPrice":8},{"id":4,"count":2,"name":"梨","desc":null,"price":8,"discount":25,"img":"/svg/梨.svg","originalPrice":10.67}]',
        total: 48,
        time: '2024-03-23T10:10:39.000Z',
        address:
          '{"id":1,"name":"颤无","phone":"1213131313","address":"广东省茂名市电白区小良镇","check":false}',
        username: 'lineo'
      },
      {
        id: 17,
        uid: 1,
        gids: '[{"id":8,"count":1,"name":"西瓜","desc":null,"price":10,"discount":20,"img":"/svg/西瓜.svg","originalPrice":12.5}]',
        total: 10,
        time: '2024-03-23T09:11:46.000Z',
        address:
          '{"id":1,"name":"颤无","phone":"1213131313","address":"广东省茂名市电白区小良镇","check":false}',
        username: 'lineo'
      },
      {
        id: 16,
        uid: 1,
        gids: '[{"id":4,"count":2,"name":"梨","desc":null,"price":8,"discount":25,"img":"/svg/梨.svg","originalPrice":10.67}]',
        total: 16,
        time: '2024-03-23T09:10:53.000Z',
        address:
          '{"id":1,"name":"颤无","phone":"1213131313","address":"广东省茂名市电白区小良镇","check":false}',
        username: 'lineo'
      },
      {
        id: 15,
        uid: 1,
        gids: '[{"id":4,"count":2,"name":"梨","desc":null,"price":8,"discount":25,"img":"/svg/梨.svg","originalPrice":10.67}]',
        total: 16,
        time: '2024-03-23T09:10:16.000Z',
        address:
          '{"id":1,"name":"颤无","phone":"1213131313","address":"广东省茂名市电白区小良镇","check":false}',
        username: 'lineo'
      },
      {
        id: 14,
        uid: 1,
        gids: '[{"id":3,"count":3,"name":"哈密瓜","desc":null,"price":12,"discount":15,"img":"/svg/哈密瓜.svg","originalPrice":14.12}]',
        total: 36,
        time: '2024-03-23T09:09:41.000Z',
        address:
          '{"id":1,"name":"颤无","phone":"1213131313","address":"广东省茂名市电白区小良镇","check":false}',
        username: 'lineo'
      },
      {
        id: 13,
        uid: 1,
        gids: '[{"id":4,"count":1,"name":"梨","desc":null,"price":8,"discount":25,"img":"/svg/梨.svg","originalPrice":10.67}]',
        total: 8,
        time: '2024-03-23T09:08:47.000Z',
        address:
          '{"id":1,"name":"颤无","phone":"1213131313","address":"广东省茂名市电白区小良镇","check":false}',
        username: 'lineo'
      },
      {
        id: 12,
        uid: 1,
        gids: '[{"id":3,"count":1,"name":"哈密瓜","desc":null,"price":12,"discount":15,"img":"/svg/哈密瓜.svg","originalPrice":14.12},{"id":4,"count":1,"name":"梨","desc":null,"price":8,"discount":25,"img":"/svg/梨.svg","originalPrice":10.67},{"id":8,"count":2,"name":"西瓜","desc":null,"price":10,"discount":20,"img":"/svg/西瓜.svg","originalPrice":12.5},{"id":5,"count":1,"name":"柠檬","desc":null,"price":6,"discount":25,"img":"/svg/柠檬.svg","originalPrice":8}]',
        total: 46,
        time: '2024-03-23T09:08:23.000Z',
        address:
          '{"id":1,"name":"颤无","phone":"1213131313","address":"广东省茂名市电白区小良镇","check":false}',
        username: 'lineo'
      },
      {
        id: 11,
        uid: 1,
        gids: '[{"id":8,"count":1,"name":"西瓜","desc":null,"price":10,"discount":20,"img":"/svg/西瓜.svg","originalPrice":12.5},{"id":3,"count":2,"name":"哈密瓜","desc":null,"price":12,"discount":15,"img":"/svg/哈密瓜.svg","originalPrice":14.12},{"id":5,"count":1,"name":"柠檬","desc":null,"price":6,"discount":25,"img":"/svg/柠檬.svg","originalPrice":8},{"id":2,"count":1,"name":"青苹果","desc":null,"price":10,"discount":25,"img":"/svg/青苹果.svg","originalPrice":13.33},{"id":6,"count":1,"name":"葡萄","desc":null,"price":14,"discount":20,"img":"/svg/葡萄.svg","originalPrice":17.5}]',
        total: 64,
        time: '2024-03-23T09:07:29.000Z',
        address:
          '{"id":1,"name":"颤无","phone":"1213131313","address":"广东省茂名市电白区小良镇","check":false}',
        username: 'lineo'
      }
    ],
    count: 13
  } as { result: Order[] | { [key in string]: string | number }[]; count: number }
  dataTotal.value = res.count
  tableData.value = res.result.map((item): Order => {
    item.address = JSON.parse(item.address as string) as Address
    item.gids = JSON.parse(item.gids as string) as Goods[]
    item.time = dayjs(item.time).format('YYYY-MM-DD HH:mm:ss')
    return item as Order
  })
}
init()
</script>
<style lang="scss">
.table-comp {
  flex: 1;
  background-color: white;
  border-radius: 12px;
  box-shadow: 2px 2px 12px $color-gray-light;
  margin-top: 12px;

  .table-content-row {
    font-size: 14px;
  }

  .table-content-header {
    font-size: 14px;
    padding: 10px 0;
  }

  .table-pagination {
    margin-top: 16px;
  }

  .table-content-cell {
    padding: 10px 0;
  }

  .row-tag,
  .row-btn {
    height: 32px;
    padding: 0 10px;
    font-size: 14px;
  }

  @include boxPadding(12px 20px);
}
</style>
